<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            display: block;
            margin-bottom: 10px;
            height: 30%;
            width: 30%;
        }
        .rgb-color {
            margin: 10px 0;
            display: flex;
            flex-direction: row;
        }
        .value-input {
            width: 60px;
            margin-right: 10px;
        }
        .menu {
            display: block;
        }

        .btn {
            padding: 10px;
        }
        .canvas{

        }
    </style>
    <script src="changeColor.js"></script>
</head>

<body>
    <input type="file" accept="image/*">
    <div class="rgb-color">
        <div>
            <div>R</div>
            <input class="value-input" id="r" type="input" value="255" class="textInput">
        </div>
        <div>
            <div>G</div>
            <input class="value-input" id="g" type="input" value="0" class="textInput">
        </div>
        <div>
            <div>B</div>
            <input class="value-input" id="b" type="input" value="0" class="textInput">
        </div>
        <input type="button" value="Change Color" class="btn">
    </div>
    <div class="menu">
        <input class="value-input" id="xxx" type="input" value="3" class="textInput">
        <input type="button" value="Grayscale" class="btn">
        <input type="button" value="Red" class="btn">
        <input type="button" value="Yellow" class="btn">
        <input type="button" value="Reset" class="btn">
    </div>
    <canvas class="canvas" id="canvas"></canvas>
</body>

</html>